<template>
    <div class="box">
        <div>
            <el-input v-model="input" class="input" placeholder="搜索" @keyup.enter="handleEnter"></el-input>
        </div>
        <div class="list">
            <ul>
                <li @click="updateName(item)" v-for="(item,index) in filteredList" :key="index">
                    <p class="name">{{item.name}}</p>
                    <img src="../assets/images/chart/list.jpg" alt="">
                    <p class="word">测试消息</p>
                    <p class="time">2025-3-20  20:18</p>
                    <!-- 之后可以尝试用时间戳来表示时间，更新接收到消息的时间
                     已经可以了，后面传消息的时候有时间戳，可以获取到通过vuex传递回来，来不及弄了 -->
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
// import instance from '../utils/instance'
import axios from 'axios';
export default {
    data() {
        return {
            input: '',
            listData: [],
            filteredList: [],
            idClickData:''
        };
    },
    mounted() {
        this.fetchDataList();
    },
    watch: {
        input(newValue) {
            this.filteredList = this.listData.filter(item => {
                return item.name.includes(newValue);
            });
        }
    },
    methods: {
        updateName(item) {
            // 从 item 中获取 id 和 name
      const id = item.id;
      const name = item.name;
      // 传递对象到 Vuex
      this.$store.dispatch('updateData', { id, name });
        },
        async fetchDataList(){
            try {
                const response = await axios.get("http://websocket.1uu.pw/user/page",{params:{
                    pageNumber:1,pageSize:999
                }});
                this.listData = response.data.data.records;
                console.log('get获取到的数据',this.listData);
                this.filteredList = this.listData;
               
            } catch (error) {
                console.error('获取列表数据失败:', error);
            }
        },
        handleEnter(){
            this.filteredList = this.listData.filter(item => {
                return item.name.includes(this.input);
            });
        }
    }
};
</script>
<style lang="scss" scoped>
.box {
  width: 280px;
  height: 100%;
  border-right: 1px solid #bbb9b9;
  margin-top: -100vh;
  margin-left: 101px;
  
  .input {
    margin-top: 10px;
    width: 210px;
    margin-left: 30px;
  }
  
  .list {
    background-color: #E5E4E4;
    margin-top: 20px;
    height: calc(100vh - 100px); /* 根据视口高度计算，留出顶部空间 */
    overflow-y: auto; /* 内容溢出时显示垂直滚动条 */
    scrollbar-color: #1090e6 #f1f1f1; /* 滑块颜色 轨道颜色 */
    scrollbar-width: none;
  }
    li {
        list-style: none;
        height: 75px;
        position: relative;
        display: flex;
        flex-direction: row;
        border-bottom: #bbb9b9 1px solid;
        img {
            width: 52px;
            height: 52px;
            position: absolute;
            left: 10px;
            top: 10px;
        }
        .name {
            position: absolute;
            left: 70px;
            color: #6CB3F6;
        }
        .word {
            color: #AAA39B;
            position: absolute;
            left: 70px;
            top: 36px;
            font-size: 18px;
        }
        .time {
            color: #AAA39B;
            position: absolute;
            left: 160px;
            top: 6px;
            font-size: 15px;
        }
    }
}
</style>